<template>
  <div>
    <Card>
      <div class="p-relative">
        <div @click="reset" class="p-absolute refresh-btn">
          <Icon size='24' type="md-refresh" />
        </div>
        <div class="flex-box search-area">
          <div class="flex-item search-btn">
            <Button type="primary" @click='create'>添加</Button>
          </div>

        </div>
      </div>
      <!-- 树型控件 -->
      <Tree :data="data.list" :render="renderContent" class="demo-tree-render" children-key='sub' style='width:60%;'>
      </Tree>
    </Card>
    <!-- 添加弹窗 -->
    <Modal v-model="initConfig.createModal" :title="initConfig.createTitle" width='500'>
      <Form ref="form" :model="initConfig.form" :rules="ruleValidate" :label-width="80">
        <FormItem label="上级">
          <div>{{initConfig.form.parent_name?initConfig.form.parent_name:'无'}}</div>
        </FormItem>
        <FormItem label="名称" prop="name">
          <Input v-model="initConfig.form.name" placeholder="请输入名称"></Input>
        </FormItem>

        <FormItem label="搜索">
          <RadioGroup v-model="initConfig.form.is_search">
            <Radio label="1">支持</Radio>&nbsp;&nbsp;&nbsp;&nbsp;
            <Radio label="0">不支持</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="状态">
          <RadioGroup v-model="initConfig.form.estate">
            <Radio label="1">启用</Radio>&nbsp;&nbsp;&nbsp;&nbsp;
            <Radio label="0">禁用</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="排序" prop="sorter">
          <Input v-model="initConfig.form.sorter" placeholder="请输入排序"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="save('form')" :disabled="initConfig.isDisable"
          :loading="initConfig.isLoading">保存</Button>
      </div>
    </Modal>
    <!-- 删除弹窗 -->
    <Modal v-model="initConfig.delModal" width="250" title="提示">
      <p class="font16">
        <Icon class='del-tips-icon' type="ios-alert-outline" color='orange' size='22' />确定删除数据？
      </p>
      <div slot="footer">
        <Button @click='initConfig.delModal=false'>取消</Button>
        <Button type="primary" @click='confirmDel'>确定</Button>
      </div>
    </Modal>

  </div>
</template>
<!-- 公共弹框，成功，失败，报错，loading -->
<script>
  import {
    mapState
  } from 'vuex'
  import {
    permission
  } from '@/config/permission.js'

  // 接口
  import {
    getList,
    add,
    put,
    del
  } from '@/api/classify-group/norms-classify'
  import {
    initConfig
  } from '@/config/global.js'
  import Tables from '_c/tables'

  import {
    uploadImgPathList
  } from '@/config/global.js'

  export default {
    name: 'tables_page',
    components: {
      Tables,

    },
    created() {
      let _this = this
      // this.$nextTick(function() {
      //   _this.role_Add = permission(this.roles, 'product/normsPropertyInsert');
      //   _this.role_Edit = permission(this.roles, 'product/normsPropertyUpdate');

      // })

      this.getList()
    },
    watch: {

    },
    mounted() {

    },
    computed: {
      ...mapState({
        roles: state => state.user.roles
      })
    },
    data() {
      return {
        initConfig: initConfig,


        data: {
          list: []
        },
        ruleValidate: {
          name: [{
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          }],
          sorter: [{
            required: true,
            pattern: /^[0-9]+$/,
            message: '请输入数字',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {

      renderContent(h, {
        root,
        node,
        data
      }) {
        return h('span', {
          style: {
            display: 'inline-block',
            width: '100%'
          }
        }, [
          h('span', [
            h('Icon', {
              props: {
                type: 'ios-paper-outline'
              },
              style: {
                marginRight: '8px'
              }
            }),
            h('span', data.title)
          ]),
          h('span', {
            style: {
              display: 'inline-block',
              float: 'right',
              marginRight: '32px'
            }
          }, [
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-add'
              }),
              style: {
                marginRight: '8px'
              },
              on: {
                click: () => {
                  this.append(data)
                }
              }
            }),
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-create',
              }),
              style: {
                marginRight: '8px'
              },
              on: {
                click: () => {
                  this.edit(data)
                }
              }
            }),
            h('Button', {
              props: Object.assign({}, this.buttonProps, {
                icon: 'md-trash',

              }),
              on: {
                click: () => {
                  this.del(data)
                }
              }
            })
          ])
        ]);
      },

      // 列表数据
      getList() {
        let _this = this
        let params = {}
        getList(params).then(res => {
          if (res.data.status == 1) {
            let result = res.data.data
            _this.data.list = result.list

          } else {
            _this.$Message.error(res.data.message || res.data.msg)
          }
        }).catch(function(error) {
          // 异常
          console.log(error)
        })
      },
      save(name) {
        let _this = this;
        this.$refs[name].validate((valid) => {

          if (valid) {
            if (_this.initConfig.isAdd) {

              // 新增接口
              add(_this.initConfig.form).then(res => {
                if (res.data.status == 1) {
                  _this.initConfig.createModal = false;
                  _this.getList(); //重新刷新数据
                  _this.$Message.success('操作成功')
                } else {
                  _this.initConfig.createModal = false;
                  //axios响应拦截
                }

              }).catch(function(error) {
                //异常
                _this.initConfig.createModal = false;
                console.log(error)
              })

            } else {
              let obj = {
                id: _this.initConfig.form.id,
                name: _this.initConfig.form.name,
                is_search: _this.initConfig.form.is_search,
                estate: _this.initConfig.form.estate,
                sorter: _this.initConfig.form.sorter

              }
              // 修改接口
              put(obj).then(res => {
                if (res.data.status == 1) {

                  _this.initConfig.createModal = false;
                  _this.getList(); //重新刷新数据
                  _this.$Message.success('操作成功')
                } else {
                  //axios响应拦截
                }

              }).catch(function(error) {
                //异常
                console.log(error)
                _this.initConfig.createModal = false;
              })

            }

            //this.$Message.success('Success!');
          } else {
            this.$Message.error('请输入必填项!');
          }
        })
      },
      reset() {
        this.getList()
      },
      create() {
        this.initConfig.createModal = true
        this.initConfig.createTitle = '新增'
        this.initConfig.isAdd = true
        this.initConfig.form = {} // 表单重置
        this.initConfig.form.is_search = '0'
        this.initConfig.form.estate = '1'
        this.initConfig.form.sorter = 0
        this.handleReset('form') // 验证重置
      },
      edit(row) {

        let obj = JSON.parse(JSON.stringify(row)) // 行数据
        this.initConfig.createModal = true
        this.initConfig.createTitle = '编辑'
        this.initConfig.isAdd = false
        this.initConfig.form = obj // 表单重置
        this.initConfig.form.name = obj.title // 表单重置
        this.initConfig.form.is_search = obj.is_search.toString();
        this.initConfig.form.estate = obj.estate.toString();


        // console.log(this.initConfig.form)
        // 赋值接口返回
        this.handleReset('form') // 验证重置
      },
      // 删除
      del(row) {
        this.initConfig.delId = row.id
        this.initConfig.delModal = true
        // 删除接口
      },
      confirmDel() {
        let _this = this
        let obj = {
          id: this.initConfig.delId
        }
        del(obj).then(res => {
          if (res.data.status == 1) {
            _this.initConfig.delModal = false
            _this.$Message.success('操作成功')
            _this.getList() // 重新刷新数据
          } else {
            _this.initConfig.delModal = false
            // axios响应拦截
          }
        }).catch(function(error) {
          // 异常
          _this.delModal = false
          console.log(error)
        })
      },
      changepage() {},

      handleReset(name) {
        this.$refs[name].resetFields()
      },

      append(data) {

        // if (!this.role_Add) {
        //   let config = {
        //     content: '没有权限访问',
        //     background: true
        //   }
        //   this.$Message.error(config)
        //   return
        // }
        if (data.level == 2) {
          let config = {
            content: '第三级分类不允许添加子级',
            background: true
          }
          this.$Message.error(config)
          return false;
        }
        this.initConfig.createTitle = '添加分类';
        this.initConfig.createModal = true;
        this.initConfig.isAdd = true;
        this.initConfig.form = {};
        this.initConfig.form.parent_name = data.parent_name;
        this.initConfig.form.parent_id = data.id;
        this.initConfig.form.is_search = '0'
        this.initConfig.form.estate = '1'
        this.initConfig.form.sorter = 0


      },
    }

  }
</script>

<style lang="scss">
  @import "./index";
</style>
